<!--折线图堆叠-->
<template>
    <div id="main" style="margin: 10px auto;width: 800px;height: 800px;"></div>
</template>
<script>
    import request from "../utils/request";
    //
    const echarts = require('echarts');
    //
    export default {
        name: "LanguageRate",
        data () {
            return {
                language1:[],
                ratings1:[],
                variety1:[],
                variety2:[]
            }
        },
        mounted(){
            this.initChart();
        },
        methods: {
            initChart(){
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                request.get("/languageRate",{
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res=> {
                    // this.data2 = [];
                    for (let i = 0; i < res.data.records.length; i++) {
                        this.language1.push(res.data.records[i]['language']+'语言');
                        this.ratings1.push(res.data.records[i]['ratings']);
                        this.variety1.push(res.data.records[i]['variety']);
                        this.variety2[i]=Number(this.ratings1[i])-Number(this.variety1[i]);
                        // console.log( this.variety2[i].toFixed(2))
                        // console.log(this.language1[i])
                    }
                    option = {
                        title: {
                            text: '2019年(左)与2020年(右)编程语言的使用率占比',
                            // subtext: '纯属虚构',
                            left: 'left',
                            top: 'bottom'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c}%'
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            top: 'center',
                            right: 20,
                            feature: {
                                // dataView: {readOnly: true},
                                // restore: {},
                                saveAsImage: {}
                            }
                        },
                        legend: {
                            orient: 'horizontal',
                            left: 'left',
                            data: this.language1
                        },

                        series: [
                            {
                                name: '2019年编程语言占比图',
                                type: 'funnel',
                                width: '40%',
                                height: '85%',
                                left: '1%',
                                top: '10%',
                                funnelAlign: 'left',

                                center: ['25%', '25%'],  // for pie

                                data: [
                                    {value: Number(this.variety2[0].toFixed(2)), name: this.language1[0]},
                                    {value: Number(this.variety2[1].toFixed(2)), name: this.language1[1]},
                                    {value: Number(this.variety2[2].toFixed(2)), name: this.language1[2]},
                                    {value: Number(this.variety2[3].toFixed(2)), name: this.language1[3]},
                                    {value: Number(this.variety2[4].toFixed(2)), name: this.language1[4]},
                                    {value: Number(this.variety2[5].toFixed(2)), name: this.language1[5]},
                                    {value: Number(this.variety2[6].toFixed(2)), name: this.language1[6]},
                                    {value: Number(this.variety2[7].toFixed(2)), name: this.language1[7]},
                                    {value: Number(this.variety2[8].toFixed(2)), name: this.language1[8]},
                                    {value: Number(this.variety2[9].toFixed(2)), name: this.language1[9]},
                                    {value: Number(this.variety2[10].toFixed(2)), name: this.language1[10]},
                                    {value: Number(this.variety2[11].toFixed(2)), name: this.language1[11]},
                                    {value: Number(this.variety2[12].toFixed(2)), name: this.language1[12]},
                                    {value: Number(this.variety2[13].toFixed(2)), name: this.language1[13]},
                                    {value: Number(this.variety2[14].toFixed(2)), name: this.language1[14]},
                                    {value: Number(this.variety2[15].toFixed(2)), name: this.language1[15]},
                                    {value: Number(this.variety2[16].toFixed(2)), name: this.language1[16]},
                                    {value: Number(this.variety2[17].toFixed(2)), name: this.language1[17]},
                                    {value: Number(this.variety2[18].toFixed(2)), name: this.language1[18]},
                                    {value: Number(this.variety2[19].toFixed(2)), name: this.language1[19]},
                                ]
                            },
                            {
                                name: '2020年编程语言占比图',
                                type: 'funnel',
                                width: '40%',
                                height: '85%',
                                left: '51%',
                                top: '10%',
                                funnelAlign: 'left',

                                center: ['75%', '25%'],  // for pie

                                data: [
                                    {value: Number(this.ratings1[0]), name: this.language1[0]},
                                    {value: Number(this.ratings1[1]), name: this.language1[1]},
                                    {value: Number(this.ratings1[2]), name: this.language1[2]},
                                    {value: Number(this.ratings1[3]), name: this.language1[3]},
                                    {value: Number(this.ratings1[4]), name: this.language1[4]},
                                    {value: Number(this.ratings1[5]), name: this.language1[5]},
                                    {value: Number(this.ratings1[6]), name: this.language1[6]},
                                    {value: Number(this.ratings1[7]), name: this.language1[7]},
                                    {value: Number(this.ratings1[8]), name: this.language1[8]},
                                    {value: Number(this.ratings1[9]), name: this.language1[9]},
                                    {value: Number(this.ratings1[10]), name: this.language1[10]},
                                    {value: Number(this.ratings1[11]), name: this.language1[11]},
                                    {value: Number(this.ratings1[12]), name: this.language1[12]},
                                    {value: Number(this.ratings1[13]), name: this.language1[13]},
                                    {value: Number(this.ratings1[14]), name: this.language1[14]},
                                    {value: Number(this.ratings1[15]), name: this.language1[15]},
                                    {value: Number(this.ratings1[16]), name: this.language1[16]},
                                    {value: Number(this.ratings1[17]), name: this.language1[17]},
                                    {value: Number(this.ratings1[18]), name: this.language1[18]},
                                    {value: Number(this.ratings1[19]), name: this.language1[19]},
                                ]
                            },
                        ]
                    };

                    option && myChart.setOption(option);
                })

            },
        }
    }
</script>

<style scoped>

</style>